<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="3" class="left">
        <ul>
          <li :class="{active: current==1}">
            <span slot="label">
              <i class="el-icon-s-grid"></i>
              全部预约
            </span>
          </li>
          <li>
            <span slot="label">
              <i class="el-icon-s-custom"></i>
              需要审核
            </span>
          </li>
          <li>
            <span slot="label">
              <i class="el-icon-s-order"></i>
              需要考核
            </span>
          </li>
        </ul>
      </el-col>
      <el-col :span="21">
        <div class="">
          <SearchComp :searchForm="searchForm" :searchData="queryString" :searchAction="searchAction"></SearchComp>
        </div>
        <div class="">
          <div class="btnStyle flex-between ">
            <ButtonComp :buttonData="buttonData" />
          </div>
          <TableCompEle class="m-t" ref="multipleTable" :tableData="tableData" :tableConfig="tableConfig" :tableAction="tableAction" :isSelect="true"
            :isIndex="true" :isShowPage="true" :queryParams="queryParams" @getPagination="getList" @handleSelectionChange="handleSelectionChange">
          </TableCompEle>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 1,
      multipleSelection: [],
      queryParams: {
        total: 20,
        currentPage: 1,
        pageSize: 10
      },
      buttonData: [
        {
          kind: 'button',
          label: '一键审核',
          plain: false,
          size: 'small',
          type: 'primary',
          click: () => {
          }
        },
        {
          kind: 'button',
          label: '一键考核',
          plain: false,
          size: 'small',
          type: 'primary',
          click: () => {
          }
        },
      ],
      tableData: [
        {
          name: '光谱仪',
          name2: '分析仪器',
          name3: '武器研究院',
          name4: '需要审核',
          name5: '按机时预约',
          name6: '需要考核',
          name7: '8:30-18:30',
          name8: '100小时',
          num: 'SP400',
          status: 1,
          statusValue: "待审核"
        },
        {
          name: '燃烧性能测试设备',
          name2: '电子测量仪',
          name3: '武器研究院',
          name4: '需要审核',
          name5: '按机时预约',
          name6: '需要考核',
          name7: '8:30-18:30',
          name8: '120小时',
          num: 'SBI',
          status: 1,
          statusValue: "待审核"
        },
        {
          name: '数字化扫描电子显微镜',
          name2: '分析仪器',
          name3: '武器研究院',
          name4: '需要审核',
          name5: '按机时预约',
          name6: '需要考核',
          name7: '8:30-18:30',
          name8: '90小时',
          num: 'KYKY2800',
          status: 1,
          statusValue: "待审核"
        },
        {
          name: 'Agilent5973色质联用仪',
          name2: '分析仪器',
          name3: '武器研究院',
          name4: '需要审核',
          name5: '按机时预约',
          name6: '需要考核',
          name7: '8:30-18:30',
          name8: '40小时',
          num: 'GC/MSD',
          status: 1,
          statusValue: "待审核"
        },
        {
          name: '锥形量热仪',
          name2: '分析仪器',
          name3: '武器研究院',
          name4: '不需要审核',
          name5: '按机时预约',
          name6: '需要考核',
          name7: '8:30-18:30',
          name8: '110小时',
          num: 'FTT-DUALCONE',
          status: 2,
          statusValue: "待审核"
        },
        {
          name: '全波段CCD物证照相系统',
          name2: '海洋仪器',
          name3: '武器研究院',
          name4: '不需要审核',
          name5: '按机时预约',
          name6: '需要考核',
          name7: '8:30-18:30',
          name8: '120小时',
          num: 'MINGBU-U6',
          status: 3,
          statusValue: "待审核"
        },
      ],
      tableConfig: [
        {
          prop: 'name',
          label: '仪器名称'
        },
        {
          prop: 'name2',
          label: '仪器类别'
        },
        {
          prop: 'name3',
          label: '所属单位'
        },
        {
          prop: 'name4',
          label: '预约审核'
        },
        {
          prop: 'name5',
          label: '预约方式'
        },
        {
          prop: 'name6',
          label: '是否需要考核'
        },
        {
          prop: 'name7',
          label: '开放预约时段'
        },
        {
          prop: 'name8',
          label: '最大可预约时长'
        },
      ],
      tableAction: {
        align: () => 'center',
        width: () => String(120),
        operations: [
          {
            label: '审核',
            isLink: true,
            type: 'primary',
            method: row => {
              const obj = {
                title: '查看预约方式及规则',
                type: 'look',
                data: row
              }
              this.$refs.addRef.show(obj)
            }
          },
          {
            label: '考核',
            isLink: true,
            type: 'primary',
            method: row => {
              const obj = {
                title: '设置预约方式及规则',
                type: 'edit',
                data: row
              }
              this.$refs.addRef.show(obj)
            }
          },
        ]
      },
      queryString: {
        name: '',
        yearStr: ''
      },
      searchForm: {
        changeMethod: () => {
          this.queryParams.currentPage = 1
          this.getList()
        },
        formData: [
          {
            type: 'Input',
            label: '仪器名称',
            prop: 'name',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入'
          },
          {
            type: 'Input',
            label: '仪器类型',
            prop: 'name',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入'
          },
          {
            type: 'Input',
            label: '预约方式',
            prop: 'name',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入'
          },
        ]
      },
      searchAction: [
        {
          label: '查询',
          type: 'primary',
          handle: () => {
            this.queryParams.currentPage = 1
            this.$refs.multipleTable.clearSelection()
          }
        },
        {
          label: '重置',
          type: 'primary',
          plain: true,
          handle: () => {
            this.queryString = {
              name: '',
              yearStr: ''
            }
            this.queryParams.currentPage = 1
          }
        }
      ]
    }
  },
  methods: {
    getList() { }
  },
}
</script>

<style lang="less" scoped>
  .left {
    ul {
      li {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 18px;
        color: #333333;
        line-height: 30px;
        text-align: left;
        font-style: normal;
        padding: 20px;
        text-align: center;
        i {
          color: #febe67;
        }
        &.active {
          background: rgba(29, 111, 219, 0.08);
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          color: #1d6fdb;
          line-height: 30px;
          text-align: center;
          font-style: normal;
          i {
            color: #1d6fdb;
          }
        }
      }
    }
  }
</style>